<template>
  <div class="backgroundImage">
    <el-image
      style="width: 100%; height: 240px"
      src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
      fit="cover"
    />
  </div>

  <!-- 用户基本信息 -->
  <div class="userInfo">
    <div class="avatar">
      <el-image
        style="width: 180px; height: 200px"
        src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
        fit="cover"
      />

      <div class="uploadBtn">
        <el-upload>
          <el-button type="primary" size="small">上传头像</el-button>
        </el-upload>
      </div>
    </div>

    <div class="info">
      <div class="signature">{{ signature }}</div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-user-2-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">{{ account }}</div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-user-3-line" style="font-size: 24px"></i>
        </div>
        <div class="value">{{ nickname }}</div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-phone-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">{{ phone }}</div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-mail-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">{{ email }}</div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-seedling-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">{{ createTime }}</div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-edit-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">
          <el-button type="primary" size="small" @click="handleOpen">
            修改
          </el-button>
        </div>
      </div>

      <div class="infoItem">
        <div class="label">
          <i class="icon-logout-box-r-fill" style="font-size: 24px"></i>
        </div>
        <div class="value">
          <el-button type="danger" size="small" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 用户角色信息 -->
  <div class="userRoles">
    <div class="label">拥有角色</div>

    <el-table :data="userRoleList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column property="enable" label="enable" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.enable === 1" type="danger"> 禁用 </el-tag>
          <el-tag v-if="scope.row.enable === 0" type="success"> 启用 </el-tag>
        </template>
      </el-table-column>
      <el-table-column property="name" label="Name" min-width="120" />
      <el-table-column property="realName" label="RealName" min-width="120" />
      <el-table-column label="Sort" min-width="420">
        <template #default="scope">
          <el-cascader
            :model-value="findParentValues(sortTree, scope.row?.sortId)"
            :options="sortTree"
            disabled
            style="width: 400px"
          />
        </template>
      </el-table-column>
      <el-table-column
        property="createTime"
        label="CreateTime"
        min-width="160"
        fixed="right"
      />
    </el-table>
  </div>

  <!--  -->
  <!--  -->
  <!-- 修改用户信息对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="更新用户信息对话框"
    width="600"
    :before-close="handleClose"
  >
    <div class="item">
      <div class="label">昵称：</div>
      <div>
        <el-input v-model="n" placeholder="Please input" style="width: 360px" />
      </div>
    </div>
    <div class="item">
      <div class="label">电话：</div>
      <div>
        <el-input v-model="p" placeholder="Please input" style="width: 360px" />
      </div>
    </div>
    <div class="item">
      <div class="label">邮箱：</div>
      <div>
        <el-input v-model="e" placeholder="Please input" style="width: 360px" />
      </div>
    </div>
    <div class="item">
      <div class="label">签名：</div>
      <div>
        <el-input
          v-model="s"
          placeholder="Please input"
          :rows="3"
          type="textarea"
          maxlength="60"
          show-word-limit
          style="width: 360px"
        />
      </div>
    </div>
    <div class="item">
      <div class="label">更新：</div>
      <div>
        <el-button type="primary" size="small" @click="updateUserInfo">
          更新
        </el-button>
      </div>
    </div>

    <template #footer>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { storeToRefs } from 'pinia'
import { logoutApi, updateUserInfoApi } from '@/request/api/user'
import { getUserRolesDetailApi } from '@/request/api/user'
import { useUserStore, useSortTreeStore } from '@/features/store/store'
import { useMessageAlertStore } from '@/features/store/componentStore'

const router = useRouter()

const { sortTree } = storeToRefs(useSortTreeStore())
const { findParentValues } = useSortTreeStore()

const { openAlert } = useMessageAlertStore()

const { nickname, avatar, email, phone, signature, account, createTime } =
  storeToRefs(useUserStore())

const n = ref<string>('')
const a = ref<string>('')
const e = ref<string>('')
const p = ref<string>('')
const s = ref<string>('')

onMounted(() => {
  getUserRolesDetail()
})

const dialogVisible = ref<boolean>(false)
const handleOpen = () => {
  n.value = nickname.value
  a.value = avatar.value
  e.value = email.value
  p.value = phone.value
  s.value = signature.value
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  n.value = ''
  a.value = ''
  e.value = ''
  p.value = ''
  s.value = ''
}

// 更新用户信息
const updateUserInfo = async () => {
  const res = await updateUserInfoApi({
    nickname: n.value,
    email: e.value,
    phoneNumber: p.value,
    signature: s.value,
  })
  if (res.code !== 200) return openAlert.error({ content: res.message })
  useUserStore().getUserInfo()
  ElMessage.success('更新成功！')
  handleClose()
}

// 退出登录
const logout = async () => {
  const res = await logoutApi()
  if (res.code !== 200) return openAlert.error({ content: res.message })
  useUserStore().setLoginStatus()
  window.localStorage.removeItem('token')
  router.push('/loginRedirect')
}

const userRoleList = ref<RoleItf[]>([])
// 获取用户角色详情
const getUserRolesDetail = async () => {
  const res = await getUserRolesDetailApi()
  if (res.code !== 200) return openAlert.error({ content: res.message })
  userRoleList.value = res.data.rolesList
}
</script>

<style lang="less" scoped>
.backgroundImage {
  width: 100%;
  height: 240px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.userInfo {
  width: 84%;
  margin-left: 8%;
  margin-right: 8%;
  display: flex;
  position: relative;
  border-bottom: 1px solid #dedfe0;

  > .avatar {
    position: relative;
    box-shadow: 0 0 8px 1px #cfcfcf;
    height: 200px;
    width: 180px;
    margin-right: 40px;
    top: -80px;

    > .uploadBtn {
      display: flex;
      justify-content: center;
      padding-top: 16px;
    }
  }

  > .info {
    position: relative;
    width: calc(100% - 220px);
    height: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    > .signature {
      position: absolute;
      top: -46px;
      font-weight: bold;
      color: #fafafa;
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    > .infoItem {
      padding: 10px;
      display: flex;
      align-items: center;

      > .label {
        font-size: 16px;
        font-weight: bold;
        color: #606266;
        padding-right: 10px;
        width: 32px;
      }

      > .value {
        font-size: 16px;
        font-weight: bold;
        color: #909399;
        display: flex;
        align-items: center;
      }
    }
  }
}

.userRoles {
  width: 84%;
  margin: 50px 8%;
  padding-bottom: 40px;
  box-shadow: 0 0 1px 2px #ececec;
  border-radius: 6px;

  > .label {
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #606266;
    user-select: none;
  }
}

.item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  > .label {
    width: 80px;
    font-weight: bold;
  }
}
</style>
